<template>
	<view class="content padding-about-24">
		<view class="view">
			<view style="border-bottom: 1rpx #ECECEC solid;padding-bottom: 30rpx;" class="display-flex align-items">
				<view class="font-size-28 ">
					用户姓名
				</view>
				<view class="margin-left-20 file-1">
					<input type="text" v-model="username" class="text-right font-size-28" placeholder="请输入您的真实姓名" />
				</view>
			</view>
			<!-- <view style="border-bottom: 1rpx #ECECEC solid;padding-bottom: 30rpx;"
				class="display-flex margin-top-30 align-items">

				<view class="font-size-28 ">
					支付宝账户
				</view>
				<view class="margin-left-20 file-1">
					<input type="text" v-model="account" class="text-right font-size-28" placeholder="请输入您的支付宝账户" />
				</view>
			</view> -->

			<view style="border-bottom: 1rpx #ECECEC solid;" class="display-flex margin-top-10 align-items">
				<view class="font-size-28 ">
					手机号
				</view>
				<!-- <view class="margin-left-20 file-1">
					<input type="number" v-model="phone" maxlength="11" class="text-right font-size-28"
						placeholder="请输入手机号" />
				</view> -->
				<view class="margin-left-20 display-flex align-items file-1">
					<input type="number" v-model="phone" disabled maxlength="11"
						class="text-right margin-top-05 file-1 font-size-28" placeholder="请输入手机号" />
					<!-- <view @tap="getCode" class="font-size-28 margin-left-20" style="color: #FE8623;">
						{{tips}}
					</view> -->
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						class="font-size-28 margin-left-20"
						style="margin: 0;padding: 0; width: 180rpx;color: #FE8623;">获取手机号</button>
				</view>
			</view>
			<!-- <view style="padding-bottom: 30rpx;" class="display-flex margin-top-30 align-items">
				<view class="font-size-28 ">
					验证码
				</view>
				<view class="margin-left-20 display-flex align-items file-1">
					<input type="number" v-model="code" maxlength="6" class="text-right file-1 font-size-28"
						placeholder="请输入验证码" />
					<view @tap="getCode" class="font-size-28 margin-left-20" style="color: #FE8623;">
						{{tips}}
					</view>
				</view>
			</view> -->
			<!-- <view class="font-size-24 margin-top-20" style="color: #7C7C7C;">
				*支付宝账户一般为手机号或者邮箱
			</view> -->
		</view>
		<view class="view margin-top-20">
			<view class="font-size-28 font-weight-500">
				微信收款二维码
			</view>
			<view @click="chooseMedia" class="display-flex center align-items margin-top-30">
				<view v-if="!alipay_img" class="upload display-flex center align-items">
					<uv-icon name="plus" size="30" color="#FF2E38"></uv-icon>
				</view>
				<view v-else class="upload">
					<image :src="alipay_img" style="width: 100%;height: 100%;" mode=""></image>
				</view>
			</view>
		</view>
		<view @tap="bindAlipay()" class="button text-center color-FFF font-size-28 margin-top-120"
			style="padding: 20rpx 268rpx;">
			立即绑定
		</view>
		<uv-code :seconds="seconds" ref="secondscode" @change="codeChange"></uv-code>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const secondscode = ref(null)
	const tips = ref('')
	const seconds = ref(60)
	const username = ref('')
	const account = ref('')
	const phone = ref('')
	const code = ref('')
	const alipay_img = ref('')
	onLoad(function(option) {
		username.value = local.get('userinfo').real_name
		account.value = local.get('userinfo').alipay
		phone.value = local.get('userinfo').phone
		alipay_img.value = local.get('userinfo').alipay_img
	});
	onShow(function() {});
	async function bindAlipay() {
		let object = {
			alipay: account.value,
			real_name: username.value,
			alipay_img: alipay_img.value,
			phone: phone.value
		}
		if (!username.value) return nativeUI('请输入真实姓名！')
		if (!account.value) return nativeUI('请输入支付宝账号！')
		if (!phone.value) return nativeUI('请获取手机号！')
		if (!alipay_img.value) return nativeUI('请上传收款码！')
		const ret = await api.bindAlipay(object)
		if (ret.code == 0) {
			nativeUI('绑定成功！')
			navigateBack()
		}
	}

	/**获取手机号 */
	async function getPhoneNumber(e) {
		const ret = await uni.login()
		if (ret.errMsg == 'login:ok') {
			if (e.detail.code) {
				let objrct = {
					code: ret.code,
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv
				}
				const {
					code,
					data
				} = await api.getWxPhone(objrct)
				if (code == 0) {
					// phoneNumber.value
					// local.set('token', ret.data.token.access_token)
					phone.value = data.phone
				}
			}
		}

	}
	/**
	 * 修改头像
	 */
	async function chooseMedia() {
		const {
			errMsg,
			tempFiles
		} = await uni.chooseMedia({
			mediaType: ['image'],
			count: 1, //默认9
		})
		console.log(tempFiles);
		if (errMsg == 'chooseMedia:ok') {
			uploadFilePromise(tempFiles[0].tempFilePath)
		}
	}
	/**
	 * @param {Object} url上传  路径
	 * 上传头像
	 */
	async function uploadFilePromise(url) {
		const {
			code,
			data
		} = await api.uploadFile(url)
		if (code == 0) {
			alipay_img.value = data.image
		}
	}

	function codeChange(text) {
		tips.value = text;
	}
	async function getCode() {
		if (!phone.value) return nativeUI('请输入手机号！')
		if (secondscode.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码'
			})
			const {
				code,
				data
			} = await api.getCode({
				phone: phone.value
			})
			if (code == 0) {
				uni.hideLoading();
				uni.$uv.toast('验证码已发送');
			}
			// setTimeout(() => {

			// 	// 这里此提示会被this.start()方法中的提示覆盖

			// 	// 通知验证码组件内部开始倒计时
			// 	secondscode.value.start();
			// }, 2000);
		} else {
			uni.$uv.toast('倒计时结束后再发送');
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">


	.upload {
		width: 344rpx;
		height: 344rpx;
		border-radius: 32rpx;
		overflow: hidden;
		border: 2rpx dashed #DFDFDF;
	}

	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
	}
</style>